<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />
		<meta name=renderer content=webkit>

		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />

		<!-- 表单css -->
		<link rel="stylesheet" href="../css/table.css" />

		<!--插件基本框架-->
		<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.min.css" />

		<!--页面布局样式-->
		<link rel="stylesheet" type="text/css" href="css/swiperStyle.css" />

		<!-- ie 兼容性样式 -->
		<link rel="stylesheet" type="text/css" href="../css/jianrong.css" />

		<!-- 本页面css -->
		<link rel="stylesheet" type="text/css" href="css/detail.css" />

		<link rel="stylesheet" type="text/css" href="css/renewDetail.css" />




	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div style="position: relative;" class="orderDetail-wrapper table-wrapper section" v-cloak>

			<div class="orderList-content-wrapper table-content-wrapper noPay">
				<div  class="price-wrapper fboxRow">
					<div class="price-wrapper-content">
						<div class="content-price fboxRow">
							<span class="title">实际支付：</span>
							<span class="unit">¥</span>
							<span class="price">{{handlePayActual()}}</span>
							<span class="salePrice">(已省¥{{saleTotalPrice}})</span>
							<i class="linear"></i>
							<div class="popover-wrapper">
								<el-popover placement="bottom" width="300" trigger="hover">
									<div class="title-wrapper-pop fboxRow">
										<span class="title-pop">优惠详情 (共省¥{{saleTotalPrice}}) </span>
									</div>
									<div class="saleInfo-wrapper">
										<div v-for="(item,index) in totalSaleInfoGroup" :key="index" class="saleInfo-item">
											<span class="item-title">{{item.title}}</span>
											<span class="item-desc nowrapShowpointer">省：¥{{item.price}}</span>
										</div>
									</div>
									<div slot="reference">
										<p style="cursor: pointer;color: #FF9416;">优惠详情<i style="color: #FF9416;margin-left: 5px;" class="icon el-icon-arrow-up"></i></p>
									</div>
								</el-popover>
							</div>
						</div>
					</div>
					<div class="fboxRow">
						<div class="content-checkbox fboxCenter mr-10">
							<el-checkbox class="mr-10" v-model="statementChecked"></el-checkbox><span class="text">我已经阅读并同意</span><span
							 class="statement">《衡天云免责声明》</span>
						</div>
						<div @click="handleClickConfirmxiadan" class="yzButton confirmxiadan">确认下单</div>
					</div>

				</div>
				<div class="serverListNav">
					<span class="nav-item">总览</span>
					<span class="nav-item">费用中心</span>
					<span class="nav-item">续费管理</span>
					<span class="nav-item">批量续费</span>
				</div>
				<div class="form-wrapper">
					<span class="from-title">
						<i @click="gotoRenewManage" class="icon el-icon-back"></i> 批量续费</span>

					<el-table class="el-table" ref="refTable" :data="tableData" style="position: relative;">
						<el-table-column label="产品类型" prop="type">
						</el-table-column>
						<el-table-column label="名称/ID" prop="name">
							<template slot-scope="scope">


								<el-popover placement="bottom" width="400" trigger="hover">
									<div class="popover-content">
										<el-row>
											<el-col :span="12">
												<div class="fboxRow">
													<span class="item-key">产品名称：</span>
													<span class="item-val">{{scope.row.name}}</span>
												</div>
											</el-col>
											<el-col :span="12">
												<div class="fboxRow">
													<span class="item-key">ID：</span>
													<span class="item-val">{{scope.row.id}}</span>
												</div>
											</el-col>
											<el-col :span="12">
												<div class="fboxRow">
													<span class="item-key">地址：</span>
													<span class="item-val">{{scope.row.area}}</span>
												</div>
											</el-col>
											<el-col :span="12">
												<div class="fboxRow">
													<span class="item-key">IP：</span>
													<span class="item-val">{{scope.row.ipNum}}个</span>
												</div>
											</el-col>
											<el-col :span="12">
												<div class="fboxRow">
													<span class="item-key">CPU：</span>
													<span class="item-val">{{scope.row.cpNum}}核</span>
												</div>
											</el-col>
											<el-col :span="12">
												<div class="fboxRow">
													<span class="item-key">数据盘：</span>
													<span class="item-val">{{scope.row.dataDisk}}G</span>
												</div>
											</el-col>
											<el-col :span="12">
												<div class="fboxRow">
													<span class="item-key">内存：</span>
													<span class="item-val">{{scope.row.memory}}G</span>
												</div>
											</el-col>
											<el-col :span="12">
												<div class="fboxRow">
													<span class="item-key">带宽：</span>
													<span class="item-val">{{scope.row.bindWith}}M</span>
												</div>
											</el-col>
											<el-col :span="12">
												<div class="fboxRow">
													<span class="item-key">SSD：</span>
													<span class="item-val">{{scope.row.ssd}}G</span>
												</div>
											</el-col>
											<el-col :span="12">
												<div class="fboxRow">
													<span class="item-key">操作系统：</span>
													<span class="item-val">{{scope.row.systemMirror}}</span>
												</div>
											</el-col>
										</el-row>
									</div>
									<div slot="reference">
										<p>{{scope.row.name}}</p>
										<p class="nowrapShowpointer w100" style="margin-top: 10px;display: inline-block;line-height: 16px;">ID:{{scope.row.id}}</p>
									</div>
								</el-popover>
							</template>
						</el-table-column>

						<el-table-column label="到期时间" prop="expireTime">
							<template slot-scope="scope">
								{{scope.row.expireTime}}
							</template>
						</el-table-column>


						<el-table-column width="auto" label="续费周期" prop="renewCycle">
							<template slot-scope="scope">
								<el-select style="width: 100px;" v-model="scope.row.renewCycle" placeholder="请选择续费周期">
									<el-option v-for="item in renewTimeCycleGroup" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</template>
						</el-table-column>


						<el-table-column width='auto' label="续费后到期时间" prop="afterRenewExpireTime">
							<template slot-scope="scope">
								{{handleAfterRenewExpireTimeText(scope.row)}}
							</template>
						</el-table-column>


						<el-table-column width="270" label="优惠券/优惠码" prop="saleType">
							<template slot-scope="scope">
								<div v-if="scope.row.saleType === 'code'" class="sale-wrapper code fboxRow">
									<i class="linear"></i>
									<el-input @input="changeSaleCode(scope.row,$event)" maxLength="20" style="width: 206px;" type="text" class="card-box-input" placeholder="请输入优惠码" v-model="scope.row.salecode"
									 clearable>
										<el-select @change="changeSaleType(scope.row,$event)" v-model="scope.row.saleType" class="selectText fboxCenter"
										 slot="prefix">
											<el-option v-for="(item,index) in saleTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
										</el-select>
									</el-input>
									<div :class="{'noClick': scope.row.salecodeprice !== undefined}" @click="handleClickConfirmSaleCode(scope.row)" class="yzButton confirm">确定</div>
								</div>

								<div v-else class="sale-wrapper ticket fboxRow">
									<el-select @change="changeSaleType(scope.row,$event)" class="typeselect" v-model="scope.row.saleType">
										<el-option v-for="(item,index) in saleTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
									</el-select>
									<el-select class="valselect" v-model="scope.row.activeSaleTicket" placeholder="请选择优惠券">
										<el-option v-for="(item,index) in scope.row.saleTicketOptions" :key="item.id" :label="item.label" :value="item.id"></el-option>
									</el-select>
								</div>

							</template>
						</el-table-column>
						<el-table-column label="金额" prop="initprice">
							<template slot-scope="scope">
								{{handlePrice(scope.row)}}
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<span @click="deleteRenewProduct(scope.row)" style="color: #F0192A;cursor: pointer;">删除</span>
							</template>
						</el-table-column>
					</el-table>


				</div>

			</div>
		</div>

		<script type="application/javascript" src="../js/util.js"></script>
		<!-- vue  -->
		<script>
			let vmServerList = new Vue({

				el: '.orderDetail-wrapper',
				data: function() {
					return {
						tableData: [{
							renewCycle: 'monthly', // 续费周期
							buyNum: 1, // 购买数量
							id: '123ghafsGZf145',
							name: '江先生', // 名称
							type: '虚拟主机', // 产品类型
							area: '香港', // 地域
							cpNum: 3, // cpu 核心数
							memory: 50, // 内存
							ipNum: 1, // IP个数
							dataDisk: 100, // 数据盘
							bindWith: 100, // 带宽
							ssd: 50, //SSD
							systemMirror: 'Centons 1.0', //操作系统 
							expireTime: '2020-12-31', // 到期时间
							afterRenewExpireTime: undefined, // 续费后到期时间
							saleType: 'ticket', // 优惠的方式   有优惠券  和优惠码两种  默认为优惠券
							salecode: undefined, // 优惠码
							salecodeprice: undefined, // 优惠码的优惠金额
							saleTicketOptions: [{ // 优惠券可选
								id: 1,
								label: '测试优惠券1',
								salePrice: 100
							}, {
								id: 2,
								label: '测试优惠券2',
								salePrice: 200
							}, {
								id: 3,
								label: '测试优惠券3',
								salePrice: 300
							}],
							activeSaleTicket: undefined, // 默认选中的优惠券
							initprice: 3000, // 原价
							actualPrice: undefined, // 实际价格
						},{
							
								renewCycle: 'monthly', // 续费周期
								buyNum: 1, // 购买数量
								id: '23434343',
								name: '唐女士', // 名称
								type: '虚拟主机', // 产品类型
								area: '香港', // 地域
								cpNum: 3, // cpu 核心数
								memory: 50, // 内存
								ipNum: 1, // IP个数
								dataDisk: 100, // 数据盘
								bindWith: 100, // 带宽
								ssd: 50, //SSD
								systemMirror: 'Centons 1.0', //操作系统 
								expireTime: '2020-12-31', // 到期时间
								afterRenewExpireTime: undefined, // 续费后到期时间
								saleType: 'ticket', // 优惠的方式   有优惠券  和优惠码两种  默认为优惠券
								salecode: undefined, // 优惠码
								salecodeprice: undefined, // 优惠码的优惠金额
								saleTicketOptions: [{ // 优惠券可选
									id: 1,
									label: '测试优惠券1',
									salePrice: 100
								}, {
									id: 2,
									label: '测试优惠券2',
									salePrice: 200
								}, {
									id: 3,
									label: '测试优惠券3',
									salePrice: 300
								}],
								activeSaleTicket: undefined, // 默认选中的优惠券
								initprice: 3000, // 原价
								actualPrice: undefined, // 实际价格
							
						},{
							
								renewCycle: 'monthly', // 续费周期
								buyNum: 1, // 购买数量
								id: '5565656',
								name: '杨先生', // 名称
								type: '虚拟主机', // 产品类型
								area: '香港', // 地域
								cpNum: 3, // cpu 核心数
								memory: 50, // 内存
								ipNum: 1, // IP个数
								dataDisk: 100, // 数据盘
								bindWith: 100, // 带宽
								ssd: 50, //SSD
								systemMirror: 'Centons 1.0', //操作系统 
								expireTime: '2020-12-31', // 到期时间
								afterRenewExpireTime: undefined, // 续费后到期时间
								saleType: 'ticket', // 优惠的方式   有优惠券  和优惠码两种  默认为优惠券
								salecode: undefined, // 优惠码
								salecodeprice: undefined, // 优惠码的优惠金额
								saleTicketOptions: [{ // 优惠券可选
									id: 10,
									label: '测试优惠券10',
									salePrice: 10
								}, {
									id: 11,
									label: '测试优惠券11',
									salePrice: 20
								}, {
									id: 12,
									label: '测试优惠券12',
									salePrice: 30
								}],
								activeSaleTicket: undefined, // 默认选中的优惠券
								initprice: 3000, // 原价
								actualPrice: undefined, // 实际价格
							
						}],

						renewTimeCycleGroup: [{ // 续费周期列表
							value: 'monthly',
							label: '1个月'
						}, {
							value: 'quarterly',
							label: '3个月'
						}, {
							value: 'halfYear',
							label: '6个月'
						}, {
							value: 'nineMonth',
							label: '9个月'
						}, {
							value: 'annually',
							label: '1年'
						}, {
							value: 'doubleYear',
							label: '2年'
						}, {
							value: 'threeYear',
							label: '3年'
						}],
						saleTypeOptions: [{
							value: 'ticket',
							label: '优惠券'
						}, {
							value: 'code',
							label: '优惠码'
						}],
						statementChecked: false, // 是否勾选声明
					}
				},
				computed: {
					//  优惠总价
					saleTotalPrice: function() {
						let saleTotalPrice = 0

						this.tableData.forEach(function(row) {
							let salePrice = 0
							if (row.saleType === 'ticket') {
								// 优惠券

								row.saleTicketOptions.forEach(function(item) {
									if (item.id === row.activeSaleTicket) {
										salePrice = item.salePrice
									}
								})
							} else {
								// 优惠码
								if (row.salecodeprice !== undefined) {
									salePrice = Number(row.salecodeprice)
								}
							}
							saleTotalPrice += Number(salePrice)
						})

						return saleTotalPrice.toFixed(2)
					},
					// 优惠信息汇总
					totalSaleInfoGroup: function() {
						let totalSaleInfoGroup = []

						this.tableData.forEach(function(row) {
							if (row.saleType === 'ticket') {
								// 优惠券
								row.saleTicketOptions.forEach(function(item) {
									if (item.id === row.activeSaleTicket) {
										totalSaleInfoGroup.push({
											title: item.label,
											price: item.salePrice
										})
									}
								})
							} else {
								// 优惠码
								if (row.salecodeprice !== undefined) {
									totalSaleInfoGroup.push({
										title: '优惠码',
										price:  row.salecodeprice
									})
								}
							}
						})
						return totalSaleInfoGroup
					}


				},
				methods: {
					// 改变优惠码的方法
					changeSaleCode: function(row,e) {
						row.salecodeprice =  undefined
					},
					
					// 处理实际支付价格
					handlePayActual: function() {
						let totalPay = 0 // 总价 
						let actualPrice // 单个的实际价格
						this.tableData.forEach(function(item) {

							if (item.actualPrice === undefined) {
								actualPrice = 0
							} else {
								actualPrice = Number(item.actualPrice)
							}
							totalPay += actualPrice
						})

						return totalPay.toFixed(2)
					},

					// 改变优惠方式  优惠券  优惠码
					changeSaleType: function(row, e) {
						console.log(row, e)
						row.salecodeprice = undefined
						row.salecode = undefined
						row.activeSaleTicket = undefined
					},


					// 点击确认优惠码
					handleClickConfirmSaleCode: _throttle(function(row) {
						console.log(row.salecode)
						if (row.salecode === undefined || row.salecode === '') {
							this.$message.error('请输入优惠码')
							return
						}

						if (row.salecode === '123') {
							this.$message.success('优惠码使用成功')
							row.salecodeprice = 200
						} else {
							this.$message.error('使用优惠码失败')
						}

					}),

					// 点击返回到续费管理页面
					gotoRenewManage: _throttle(function() {
						window.open('renewManage.html', '_self')
					}),
					// 处理续费后到期时间
					handleAfterRenewExpireTimeText: function(row) {
						// 这里为模拟后台处理
						if (row.renewCycle === 'monthly') {
							return '处理续费后到期时间 -  1个月'
						} else if (row.renewCycle === 'quarterly') {
							return '处理续费后到期时间 -  3个月'
						} else if (row.renewCycle === 'halfYear') {
							return '处理续费后到期时间 -  6个月'
						} else if (row.renewCycle === 'nineMonth') {
							return '处理续费后到期时间 -  9个月'
						} else if (row.renewCycle === 'annually') {
							return '处理续费后到期时间 -  1个月'
						}


					},
					// 处理价格的方法
					handlePrice: function(row) {
						let salePrice = 0 // 优惠价格
						if (row.saleType === 'ticket') {
							// 优惠券

							row.saleTicketOptions.forEach(function(item) {
								if (item.id === row.activeSaleTicket) {
									salePrice = item.salePrice
								}
							})


						} else {
							// 优惠码
							if (row.salecodeprice !== undefined) {
								salePrice = Number(row.salecodeprice)
							}
						}
						row.actualPrice = (row.initprice - salePrice).toFixed(2)
						return row.actualPrice + '元'
					},

					// 删除续费产品
					deleteRenewProduct: _throttle(function(row) {
						console.log('删除续费产品' + row.id)
					}),
					// 点击确认下单
					handleClickConfirmxiadan: _throttle(function() {
						if (!this.statementChecked) {
							this.$message.error('请阅读并同意声明后，再下单');
							return
						}
						console.log('点击确认下单')
						window.open('detail.html','_self')
					}),

				},
				mounted: function() {
					
				}

			})
		</script>
	</body>
</html>
